<template>
	<el-row>
		<el-form>
			<el-col :span="6">
				<el-form-item label="县地区" prop="pid">
					<el-select v-model="areaPid" placeholder="县地区"   size="small" @change="ChooseCName">
						<el-option v-for="dict in pName" :key="dict.areaId" :label="dict.areaName" :value="dict.areaId" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="市地区" prop="cid">
					<el-select v-model="areaCid" placeholder="市地区"   size="small" @change="ChooseAName">
						<el-option v-for="dict in cName" :key="dict.areaId" :label="dict.areaName" :value="dict.areaId" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="区地区" prop="aid">
					<el-select v-model="areaAid" placeholder="区地区"   size="small" v-on:change="chooseCityData">
						<el-option v-for="dict in aName" :key="dict.areaId" :label="dict.areaName" :value="dict.areaId" />
					</el-select>
				</el-form-item>
			</el-col>
		</el-form>
	</el-row>

</template>

<script>
	import {
		AreaTree
	} from '../../api/area.js'

	export default {
		name: 'AreaSelect',
		props:{
			pid: Number,
			cid: Number,
			aid: Number,
		},
		data() {
			return {
				areaPid: this.pid,
				areaCid: this.cid,
				areaAid: this.aid,
				pName: [],
				cName: [],
				aName: [],
			}
		},
		created() {
			
			if(this.pid){
				this.getAreaName();
				this.ChooseCName();
				this.ChooseAName();
			}else{
				this.getAreaName();
			}
			 
		},
		methods: {
			getAreaName() {
				let areaQuery = {
					parentId: '0'
				}
				AreaTree(areaQuery).then(resp => {
					this.pName = resp.data;
				})

			},
			ChooseCName(event) {
				let CNameQuery = {
					parentId: this.areaPid
				}
				AreaTree(CNameQuery).then(resp => {
					this.cName = resp.data
				})
				if(event){
					this.areaCid=undefined
					this.areaAid=undefined
					this.chooseCityData()
				}
			 },
			ChooseAName(event) {
				let ANameQuery = {
					parentId: this.areaCid
				}
				AreaTree(ANameQuery).then(resp => {
					this.aName = resp.data
				})
				if(event){
					this.areaAid=undefined
					this.chooseCityData()
				}
				 
			}, 
			chooseCityData(){
				let cityList={};
				cityList.pid=this.areaPid;
				cityList.cid=this.areaCid;
				cityList.aid=this.areaAid;
				this.$emit('city-event', cityList)
			}
		}
	}
</script>

<style>
</style>
